<%--
  Created by IntelliJ IDEA.
  User: Dhy
  Date: 2023/9/5
  Time: 10:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>修改密码</title>
</head>
<style>
    .verify1{
        margin-top: 10px;
        margin-left: 40px;
    }
</style>
<body>
<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">旧密码</label>
        <div class="layui-input-block">
            <input type="text" name="password" id="password" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">新密码</label>
        <div class="layui-input-block">
            <input type="text" name="newPassword" id="newPassword" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">确认密码</label>
        <div class="layui-input-block">
            <input type="text" name="rePassword" id="rePassword" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
        <button onclick="validatePassword()" class="verify1" >验证旧密码</button>
        <button onclick="validatePassword()" class="verify1" >验证新密码</button>
        <button onclick="validatePassword()" class="verify1" >验证重复密码</button>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit lay-filter="modifiedPwd">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script src="./layui/layui.js"></script>
<script>

    function validatePassword() {
        var emailInput = document.getElementById("password");
        var email = emailInput.value;

        // 定义邮箱地址的正则表达式
        var emailRegex = /^[a-z]+$/;

        if (emailRegex.test(email)) {
            alert("密码格式正确！");
            event.preventDefault(); // 阻止表单的默认提交行为
        } else {
            alert("密码格式不正确！");
        }
    }
    function validatePassword() {
        var emailInput = document.getElementById("newPassword");
        var email = emailInput.value;

        // 定义邮箱地址的正则表达式
        var emailRegex = /^[a-z]+$/;

        if (emailRegex.test(email)) {
            alert("密码格式正确！");
            event.preventDefault(); // 阻止表单的默认提交行为
        } else {
            alert("密码格式不正确！");
        }
    }
    function validatePassword() {
        var emailInput = document.getElementById("rePassword");
        var email = emailInput.value;

        // 定义邮箱地址的正则表达式
        var emailRegex = /^[a-z]+$/;

        if (emailRegex.test(email)) {
            alert("密码格式正确！");
            event.preventDefault(); // 阻止表单的默认提交行为
        } else {
            alert("密码格式不正确！");
        }
    }

    layui.use(['form', 'laydate', 'util'], function(){
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var util = layui.util;
        $ = layui.$;    //全局变量


        // 提交事件
        form.on('submit(modifiedPwd)', function(data){
            var field = data.field; // 获取表单字段值

            //防止重复点击
            $(".layui-btn").addClass('layui-btn-disabled');
            $(".layui-btn").attr('disabled','disabled');


            // 显示填写结果，仅作演示用
            // layer.alert(JSON.stringify(field), {
            //     title: '当前填写的字段值'
            // });
            // 此处可执行 Ajax 等操作
            $.ajax({
                url: '/modifiedPwd',   // ajax请求地址 地址/开头是接口，直接写是页面
                data: field,  // 请求时传递的参数
                type: 'post',  // 请求的方式，get\post
                dataType: 'json', // 、json
                success: function(result){  // 请求成功时的回调， result请求返回的数据。
                    console.log(result);
                    if (result.code === 200){

                        layer.msg("修改成功");
                    }else {
                        layer.msg(result.msg);
                    }
                    //解放提交按钮
                    $(".layui-btn").removeClass('layui-btn-disabled');
                    $(".layui-btn").removeAttr('disabled');

                },
                error: function(result){   // 请求失败时的回调
                    console.log(result);
                    layer.msg(result.msg);
                }
            });

            return false; // 阻止默认 form 跳转
        });
    });
</script>
</body>
</html>
